<template>
	<form @submit.prevent="generateDocx">
		 <div style="background-color: aliceblue;height: 4rem;padding-top: 1.2rem;padding-bottom: 0.5rem;">
		    <el-row :gutter="20">
		      <el-col :span="12">
		        <div>
		          <el-statistic group-separator="," :precision="2" value="1.0" title="版本号"></el-statistic>
		        </div>
		      </el-col>
		     

		     <el-col :span="12">
		       <div style="font-size: 2px !important;">
		         <el-statistic group-separator="," :precision="2" decimal-separator="."  :value="value3" :title="title">
		           <template slot="prefix">
		             <i class="el-icon-s-flag" style="color: red"></i>
		           </template>
		           <template slot="suffix">
		             <i class="el-icon-s-flag" style="color: blue"></i>
		           </template>
		         </el-statistic>
		       </div>
		     </el-col>
		    </el-row>
		  </div>
		<el-collapse v-model="activeNames" @change="handleChange">
			<el-collapse-item title="基本信息" name="1">
				<el-row>
					<el-col :span="8">
						<el-form-item label-width="80px" label="报告名称" prop="name">
							<el-input v-model="dataString.name" :span="2"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="80px" label="委托单位">
							<el-input v-model="dataString.wtdw"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="80px" label="研制单位">
							<el-input v-model="dataString.yzdw"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label-width="80px" label="文档标识">
							<el-input v-model="dataString.csdw" :span="2" placeholder="请直接填写编号(如22066)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="80px" label="报告日期">
							<el-date-picker :formatter="formatDate" v-model="dataString.bgrq" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="80px" label="发布日期">
							<el-date-picker :formatter="formatDate"  v-model="dataString.fbrq" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label-width="80px" label="参与者">
							<el-input v-model="dataString.cyz" :span="2"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="80px" label="报告日期">
							<el-date-picker :formatter="formatDate" v-model="dataString.bgrq" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="80px" label="发布日期">
							<el-date-picker :formatter="formatDate"  v-model="dataString.fbrq" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div class="grid-content bg-purple-dark"></div>
					</el-col>
				</el-row>
			</el-collapse-item>
			<el-collapse v-model="activeNames" @change="handleChange">
				<el-collapse-item title="联系人基本信息表" name="2">
					<el-row>
						<el-col :span="8">
							<el-form-item label-width="80px" label="邮政编码" >
								<el-input v-model="dataString.yzbm" :span="2"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label-width="80px" label="联系人姓名">
								<el-input v-model="dataString.lxrxm"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label-width="80px" label="职务/职称">
								<el-input v-model="dataString.zw"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label-width="80px" label="单位地址">
								<el-input v-model="dataString.dwdz" :span="2" placeholder="请直接单位地址"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label-width="80px" label="所属部门">
								<el-input v-model="dataString.ssbm" :span="2" placeholder="请直接所属部门"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label-width="80px" label="联系方式">
								<el-input v-model="dataString.lxfs" :span="2" ></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label-width="80px" label="编制人">
								<el-input v-model="dataString.bzr" :span="2"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label-width="80px" label="编制日期">
								<el-date-picker :formatter="formatDate" v-model="dataString.bzrq" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label-width="80px" label="审核人">
								<el-input v-model="dataString.shr" :span="2"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label-width="80px" label="审核日期">
								<el-date-picker :formatter="formatDate" v-model="dataString.shrq" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label-width="80px" label="批准人">
								<el-input v-model="dataString.pzr" :span="2"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label-width="80px" label="批准日期">
								<el-date-picker :formatter="formatDate" v-model="dataString.pzrq" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<div class="grid-content bg-purple-dark"></div>
						</el-col>
					</el-row>
				</el-collapse-item>
			</el-collapse>
			<el-collapse-item title="测试结论">
				<el-form-item label-width="120px" label="测试周期">
				    <el-col :span="4">
				      <el-date-picker type="date" placeholder="选择日期" v-model="dataString.date1" style="width: 100%;"></el-date-picker>
				    </el-col>
				    <el-col class="line" :span="1">至</el-col>
				    <el-col :span="4">
				     <el-date-picker type="date" placeholder="选择日期" v-model="dataString.date2" style="width: 100%;"></el-date-picker>
				    </el-col>
					<!-- <el-form-item label-width="120px" label="测试结论日期">
					<el-date-picker type="date" placeholder="选择日期" v-model="dataString.date2" style="width: 100%;"></el-date-picker>
					</el-form-item> -->
				</el-form-item>
				<el-form-item label-width="120px" label="测试结论">
					<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="dataString.csjl">
					</el-input>
				</el-form-item>
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="120px" label="功能性测试内容" >
							<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="dataString.gnx">	</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label-width="120px" label="功能个数">
							<el-input  type="number"  v-model="dataString.gngs" ></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="120px" label="通过个数">
							<el-input v-model="dataString.tggs" type="number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label-width="120px" label="通过率">
							<el-input style="float: left;" placeholder="自动计算" v-model="dataString.tgl" readonly="" type="number"></el-input>
							
						</el-form-item>
					</el-col>
					<el-col :span="1">
							<span style="float: left;margin-top: 0.3rem;margin-left: 0.5rem;">%</span>
					</el-col>
				
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="120px" label="性能效率测试内容" >
							<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="dataString.xnxl">	</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label-width="120px" label="功能个数">
							<el-input v-model="dataString.xngs" type="number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="120px" label="通过个数">
							<el-input v-model="dataString.xntggs" type="number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label-width="120px" label="通过率">
							<el-input v-model="dataString.xntgl" placeholder="自动计算" readonly="" type="number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1">
							<span style="float: left;margin-top: 0.3rem;margin-left: 0.5rem;">%</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="120px" label="安全性测试内容" >
							<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="dataString.aqx">	</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label-width="120px" label="功能个数">
							<el-input v-model="dataString.aqgs" type="number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label-width="120px" label="通过个数">
							<el-input v-model="dataString.aqtggs" type="number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label-width="120px" label="通过率">
							<el-input v-model="dataString.aqtgl" placeholder="自动计算" readonly="" type="number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1">
							<span style="float: left;margin-top: 0.3rem;margin-left: 0.5rem;">%</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div class="grid-content bg-purple-dark"></div>
					</el-col>
				</el-row>
			</el-collapse-item>
			

		</el-collapse>
		<div>
			<el-button type="primary" style="margin-top: 2.8%;font-size: 15px;" round @click="exportWord">生成测试报告
			</el-button>
		</div>
	</form>
</template>

<script>
	import {
		defineComponent
	} from 'vue'
	import Docxtemplater from 'docxtemplater'
	import PizZip from "pizzip";
	import JSZipUtils from "jszip-utils";
	import {
		saveAs
	} from "file-saver";
	import moment from 'moment'
	
	export default defineComponent({
		name: 'YourComponent',
		data() {
			return {
				like: true,
				        value1: 4154.564,
				        value2: 2222,
						 value3: '',
				        title: '时间',
				activeNames: ['1'],
				dataString: {
					name: "",
					wtdw: "",
					yzdw: "",
					csdw: "",
					bgrq: new Date(),
					fbrq: new Date(),
					bs: "",
					wdgs: "",
					yzlxfs: "",
					cslxfs: "",
					ktyjnr: "",
					ktgcgs: "",
					cshj: "",
					csffsm: "",
					csjggs: "",
					slcsqk: "",
					hgcsqk: "",
					rwsmzqk: "",
					csjl: "",
					cyz:"",
				}
			}
		},
		mounted() {
		    setInterval(() => {
		      const now = new Date();
		      const hours = now.getHours().toString().padStart(2, '0');
		      const minutes = now.getMinutes().toString().padStart(2, '0');
		      const seconds = now.getSeconds().toString().padStart(2, '0');
		      this.value3 = `${hours}:${minutes}:${seconds}`;
			  this.dataString.tgl = (this.dataString.tggs / this.dataString.gngs*100).toFixed(2);
			   this.dataString.xntgl = (this.dataString.xntggs / this.dataString.xngs*100).toFixed(2);
			    this.dataString.aqtgl =( this.dataString.aqtggs / this.dataString.aqgs*100).toFixed(2);
		    }, 1000);
		  },
		methods: {
			 integerZeroFn(value) {
			      let reg = /^(0|\+?[1-9][0-9]*)$/;
			      let strArray = value.split("");
			      let newStrs = "";
			      for (let i = 0; i < strArray.length; i++) {
			        if (reg.test(strArray[i])) {
			          console.log(strArray[i]);
			          newStrs += strArray[i];
			        } else if (i > 0 && strArray[i] === "0") {
			          newStrs += strArray[i];
			        }
			      }
			      if (!(newStrs - 0 < 0)) {
			        return newStrs - 0;
			      } else {
			        return "";
			      }
			    },
			 formatDate(date) {
			      return moment(date).format('YYYY-MM-DD');
			    }, 

			// 导出 word 文件
			exportWord(row) {
				let _this = this;
				//模板文件的位置
				let docxsrc = "测试报告.doc";
				//导出文件的名字
				let docxname = "测试报告.docx";
				// 读取并获得模板文件的二进制内容
				JSZipUtils.getBinaryContent("http://localhost:3000/测试报告.docx", function(error, content) {
					// docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
	
					// 抛出异常
					if (error) {
						throw error;
					}
					// 创建一个PizZip实例，内容为模板的内容
					let zip = new PizZip(content);
					// 创建并加载docx templater实例对象
					let doc = new Docxtemplater().loadZip(zip);
					// 设置模板变量的值
					const data = {
						name: 'John',
					};
					_this.dataString.bgrq = _this.formatDate(_this.dataString.bgrq);
					_this.dataString.fbrq = _this.formatDate(_this.dataString.fbrq);
					
					_this.dataString.date2 = _this.formatDate(_this.dataString.date2);
					_this.dataString.date1 = _this.formatDate(_this.dataString.date1);

_this.dataString.bzrq = _this.formatDate(_this.dataString.bzrq);
_this.dataString.shrq = _this.formatDate(_this.dataString.shrq);
_this.dataString.pzrq = _this.formatDate(_this.dataString.pzrq);
					doc.setData(_this.dataString);

					try {
						// 用模板变量的值替换所有模板变量
						doc.render();
					} catch (error) {
						// 抛出异常
						throw error;
					}

					// Get the generated Word file as a Blob
					const blob = doc.getZip().generate({
						type: 'blob'
					});

					// Download the Blob as a file
					const link = document.createElement('a');
					link.href = URL.createObjectURL(blob);
					link.download = _this.dataString.name+'测试报告.docx';
					link.click();
					// 将目标文件对象保存为目标类型的文件，并命名
				});
			}
		}
	})
</script>
<style>
	.el-collapse-item__header {
		font-weight: 500 !important;
		color: #000000 !important;
		font-size: 18px;
	}
	<style lang="scss">
	  .like {
	    cursor: pointer;
	    font-size: 25px;
	    display: inline-block;
	  }

</style>
